<template>

  <div>
    <Row class="task-banner-main">
      <Col span="24" ></Col>
    </Row>
    <Row style="margin-top: 10px">
      <Col class="hallt-wrap" span="12" offset="4">
        <Row>
          <Col span="3" >
            <span class="h3-size"> 项目类型:</span>
          </Col>
          <Col span="3" >
            <nuxt-link :to="'/zhongce/zhongce?status='+status" v-bind:class="{active:type==''}">全部</nuxt-link>
          </Col>
          <Col span="3" v-for="(value,key) in project_type">
            <nuxt-link :to="'/zhongce/zhongce?type='+key+'&status='+status" v-bind:class="{ active: key==type }">{{value}}</nuxt-link>
          </Col>

        </Row>
        <Row>
          <Col span="3"  >
            <span class="h3-size"> 项目状态:</span>
          </Col>
          <Col span="3" >
            <nuxt-link :to="'/zhongce/zhongce?type='+type" v-bind:class="{active:status==''}">全部</nuxt-link>
          </Col>
          <Col span="3" v-for="(value,key) in  project_status">
            <nuxt-link :to="'/zhongce/zhongce?type='+type+'&status='+key" v-bind:class="{ active: key==status }">{{value}}</nuxt-link>
          </Col>
        </Row>
      </Col>
    </Row>
    <Row class="content-warp" v-show="is_loading==1" >
      <Col span="12" offset="4">


        <Spin fix>
          <Icon type="ios-loading" size=18 class="demo-spin-icon-load"></Icon>
          <div>Loading</div>
        </Spin>
      </Col>
    </Row>
    <Row class="content-warp" v-show="is_loading==0">



      <Col span="12" offset="4">
        <div v-for="(value,key) in project">
          <nuxt-link v-bind:to="'/zhongce/detail/'+value.project_id">
      <Row class="row-warp">
        <Col span="3" offset="1" class="img-logo">

          <img :src="value.logoSrc" width="60px" height="60px"/>
        </Col>
        <Col span="6"  class="colom-font">

         <p class="h3-size">  {{value.title}}</p>
         <Row>
           <Col>
              <div class="c_FDCD25 " > 
            </div>
           </Col>
           <Col>
               <p class="p-1"> 报名详情:<span>13/15</span></p>
           </Col>
         </Row>
     
        </Col>
        <Col span="6" class="colom-font">
       
          <p class="h4-size">{{value.typeDesc}} </p>
          <p>剩余时间:{{value.timeEnd}} </p>
        </Col>
        <Col  class="colom-font">
             <p> 预计收益:<span style="color:red">100 </span>元/人</p>
            <p>   <Button :type="value.statusButton" shape="circle">{{value.statusDesc}}</Button> </p>
        </Col>
      </Row>
      </nuxt-link>
          <Divider />
        </div>
      </Col>

    </Row>
    <Divider :dashed="true" />
    <Row >
      <Col span="12" offset="4" style="text-align: center">
        <Page :total="meta.total" :current="meta.current_page" :page-size="meta.per_page"  @on-change="to_page"/>
      </Col>
    </Row>
  </div>
</template>
<script>

  import  qs from  'qs'





  export default {

    layout: 'gongce',
    async asyncData ({ params,query,$axios }) {
      let type=query.type==undefined ? '' :query.type
      let status=query.status==undefined ? '' : query.status
      let page=query.page==undefined ? 1 : query.page

      let project = await $axios.$get('/api/project',{params:{type:type,page:page,status:status}})
      return {
        project: project.data,
        status:status,
        type:type,
        page:page,
        meta:project.meta
      }
    },
    watch: {
      $route: {
        handler: function(val, oldVal){
          console.log(oldVal);
          this.type=val.query.type==undefined ? '' :val.query.type
          this.status=val.query.status==undefined ? '' : val.query.status
          this.page=val.query.page==undefined ? 1 : val.query.page
          this.is_loading=1
          this.$axios.$get('/api/project',{params:{type:this.type,page:this.page,status:this.status}}).then((res)=>{
                  this.project=res.data
            this.is_loading=0
                  this.meta=res.meta
          })
        },
        // 深度观察监听
        deep: true
      }
    },
    data() {
      return {//项目类型
        project_type: [

        ],
        project_status: [

        ],
        project:[

        ],
        type:'' ,//类型
        status:'',//
        page:1,//页数
        meta:{},
        is_loading:0,
        true:true
      }
    },
/*    computed(){

    },*/
    mounted(){
      //类型
      const project_type=  this.$axios.$get('/api/project/type');
      project_type.then(res=>{
        if (res.code==200){
          this.project_type=res.data
        } else{
          this.$Message.error(res.message)
        }

      }).catch(err=>{
        this.$Message.error('服务器繁忙')
      })
      //状态
      const project_status=this.$axios.$get('/api/project/status')
      project_status.then(res=>{
        if (res.code==200){

          this.project_status=res.data
        }
      }).catch(err=>{
        this.$Message.error('服务器繁忙')
      })
    },
    //设置header
    head () {
      return {
        title: '汇聚行业精英，提升软件质量',
        meta: [
          { hid: '汇聚行业精英，提升软件质量', name: '汇聚行业精英，提升软件质量', content: '汇聚行业精英，提升软件质量' }
        ]
      }
    },
    methods:{
      to_page(page){

        this.$router.push("/zhongce/zhongce?type="+this.type+'&status='+this.status+'&page='+page)
      }
    },
    created() {
      console.log(this.$route.query.id)
    }
  }
</script>
<style scoped>
  @import "~/assets/zhongce.css";
  .active{
    color: #2d8cf0;
    text-decoration: none;
  }
  .img-logo{
    padding-top:10px
  }
  .c_FDCD25{
    background-color: #F9BF45;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    margin: 12px 4px;
    vertical-align: middle;
    float: left;

  }
  .colom-font{
    line-height: 40px
  }
  .p-1{
    display: inline-block;

  }

</style>
